<template>
    <div class="menu-container">
        <el-scrollbar style="height:100%">
            <el-menu :default-active="activeIndex" class="el-menu-list" mode="vertical" background-color="transparent" router>
                <template v-for="item in routeList">
                    <el-menu-item v-if="!item.children" :index="item.path" :key="item.path">
                        <span>{{item.meta.title}}</span>
                    </el-menu-item>
                    <div v-else :key="item.path + 1" class="sub-list">
                        <div class="sub-title">
                            <h4>{{ item.meta.title }}</h4>
                            <!-- <el-icon v-if="item.collapse"><ArrowUp /></el-icon>
                            <el-icon v-else><ArrowDown /></el-icon> -->
                        </div>
                        <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path">
                            <span>{{child.meta.title}}</span>
                        </el-menu-item>
                    </div>
                </template>
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script>
import { toRefs, onMounted, reactive } from 'vue'
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
import { useRoute } from 'vue-router'
import { ArrowDown } from '@element-plus/icons-vue'
export default {
    name: 'NestTree',
    props: {
        activeRoute: {
            type: String,
            default: null
        }
    },
    components: {
        ArrowDown
    },
    setup(props) {
        const { activeRoute } = toRefs(props)
        const stores = useRoutesList();
        const { routesList } = storeToRefs(stores);
        const route = useRoute()
        const state = reactive({
            routeList: [],
            activeIndex: null
        })
        onMounted(() => {
            const list = routesList.value.find(item => {
                return item.name == activeRoute.value
            })
            if(list){
                state.routeList = list.children.filter(item => {
                    return !item.meta.isHideNest
                })
                if(route.meta.multipleNest) {
                    // 多级路由
                    const path = route.path.split('/')
                    let activePath = ''
                    for(let i = 1; i < path.length - 1; i ++){
                        activePath += '/'+path[i]
                    }
                    state.activeIndex = route.path
                }else{
                    state.activeIndex = route.path
                }
            }
        })
        return {
            ...toRefs(state)
        }
    }
}
</script>

<style scoped lang="scss">
:deep(.el-menu-item){
    color: var(--el-text-color-primary);
    height: 35px !important;
    line-height: 35px !important;
    margin: 16px 5px 16px;
    padding: 0 !important;
    text-align: center;
    display: flex;
    justify-content: center;
    width: 90px;
    overflow: hidden;
    &::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: -1px;
        bottom: -1px;
        right: -1px;
        left: -1px;
        background: var(--el-color-primary);
        transform: rotateZ(-90deg) translate(-100%, -100%);
        transform-origin: top left;
        transition: transform .3s;
        transition-timing-function: linear;
        border-radius: 4px;
    }
    span{
        position: absolute;
        z-index: 2;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
    &::after {
        content: "";
        position: absolute;
        top: 1px;
        bottom: 1px;
        right: 1px;
        left: 1px;
        border-radius: 2px;
        background: var(--next-color-white);
        cursor: pointer;
    }
    &:hover{
        span{
            color: var(--el-color-primary);
        }
        &::before{
            transform: rotateZ(0deg) translate(0%, -0%);
        }
    }
}
:deep(.el-menu-item.is-active){
    background-color: var(--el-color-primary-light-9) !important;
    color: var(--el-color-primary);
    margin: 16px 5px 16px;
    border-radius: 4px;
    padding: 0 !important;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    span{
        position: absolute;
        z-index: 2;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
    &::after {
        content: "";
        position: absolute;
        top: 1px;
        bottom: 1px;
        right: 1px;
        left: 1px;
        border-radius: 2px;
        background: var(--el-color-primary-light-9);
        cursor: pointer;
    }
    &::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: -1px;
        bottom: -1px;
        right: -1px;
        left: -1px;
        background: var(--el-color-primary);
        transform: rotateZ(-90deg) translate(-100%, -100%);
        transform-origin: top left;
        transition: transform .3s;
        transition-timing-function: linear;
        transform: rotateZ(0deg) translate(0%, -0%);
    }
}
.menu-container{
    width: 110px;
    // overflow: hidden;
    background: var(--next-color-white);
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    box-shadow: rgba(0, 0, 0, 0.03) 1.95px 1.95px 2.6px;
    border-right: 1px solid var(--el-border-color-light);
    box-sizing: border-box;
    max-height: 100vh;
    .el-menu-list{
        width: 100%;
    }
    .menu-collapse{
        position: absolute;
        right: -30px;
        top: 50%;
        background: var(--next-color-white);
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 8px 8px 0;
        padding: 5px 0;
        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
        font-size: 18px;
        color: var(--el-color-primary);
        cursor: pointer;
        .fa{
            font-weight: bold;
        }
    }
    .sub-title{
        font-weight: bold;
        padding: 12px 6px 0;
        font-size: 15px;
        color: var(--el-text-color-primary);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .sub-list {
        :deep(.el-menu-item) {
            margin: 10px 0 10px 10px;
            height: 32px !important;
            line-height: 32px !important;
            width: 98px;
            &:last-child{
                margin-bottom: 0;
            }
            span{
                font-size: 12px;
            }
        }
    }
}
[data-theme='dark']{
    .menu-container{
        background: var(--next-bg-main-color) !important;
    }
    .el-menu-item{
        &::after{
            background: var(--next-bg-main-color) !important;
        }
    }
}
</style>